<template>
  <div class="search-teacher">
    <div class="search-teacher-title">
      <box-border title-button="查询老师" />
    </div>
    <div class="search-teacher-header">
      <div>
        <input v-model="searchTeacherVal" placeholder="">
      </div>
      <el-button type="primary" icon="el-icon-search" @click="searchTeacher">搜索</el-button>
    </div>
    <div class="search-teacher-center">
      <el-card v-for="teacherInfo in teacherList" :key="teacherInfo.id" class="search-teacher-center-content">
        <el-row :gutter="60" type="flex" justify="start">
          <el-col :span="10">
            <div class="search-teacher-center-img">
              <img :src="teacherInfo.picture" alt="">
            </div>
          </el-col>
          <el-col :span="14" class="search-teacher-center-content-right">
            <ul>
              <li>姓名：{{ teacherInfo.nickName }}</li>
              <li>学历：{{ teacherInfo.level }}</li>
              <li>擅长：{{ teacherInfo.advantage }}</li>
              <li>教学经验：{{ teacherInfo.education }}</li>
            </ul>
            <button @click="handleTeacherDetail(teacherInfo.id)">查看详情</button>
          </el-col>
        </el-row>
      </el-card>
    </div>
    <div class="search-teacher-footer">
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[5, 10, 15]"
        :page-size="limit"
        layout="prev, pager, next, jumper"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      teacherList: [],
      currentPage: 1,
      limit: 5,
      total: 0,
      searchTeacherVal: ''
    }
  },
  mounted() {
    this.getTeacherList()
  },
  methods: {
    // 获取老师全部信息
    async getTeacherList() {
      const result = await this.$API.teacher.getTeacherList(this.currentPage, this.limit)
      result.data.rows.forEach(item => {
        if (item.advantage) {
          if (item.advantage.length > 25) {
            item.advantage = item.advantage.slice(0, 25) + '...'
          }
        }
      })
      this.teacherList = result.data.rows
      this.total = result.data.count
    },
    // 搜索老师
    async searchTeacher() {
      const searchTeacherVal = this.searchTeacherVal
      Object.assign(this.$data, this.$options.data())
      if (searchTeacherVal) {
        const result = await this.$API.teacher.searchTeacher(searchTeacherVal, this.currentPage, this.limit)
        console.log(result)
      } else {
        this.getTeacherList()
      }
    },
    // 点击查看老师基本信息
    handleTeacherDetail(teacherId) {
      this.$router.push({
        name: 'TeacherInfo',
        params: {
          id: teacherId
        }
      })
    },
    handleCurrentChange(page) {
      this.currentPage = page
      this.getTeacherList()
    }
  }
}
</script>

<style lang="scss" scoped>
.search-teacher {
  min-width: 1200px;
  margin: 80px 3.5%;
  .search-teacher-header {
    margin: 90px 0;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    input {
      width: 600px;
      background-color: #fff;
      background-image: none;
      border-radius: 4px;
      border: 1px solid #dcdfe6;
      box-sizing: border-box;
      color: #606266;
      display: inline-block;
      font-size: inherit;
      height: 40px;
      line-height: 40px;
      outline: 0;
      padding: 0 15px;
      transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    }
    el-button {
      width: 200px;
      height: 100px;
    }
  }
  .search-teacher-center {
   display: grid;
   grid-template-columns: repeat(auto-fill, 400px);
   justify-content: space-between;
    flex-wrap: wrap;
    max-height: 720px;
    .search-teacher-center-content {
      width: 420px;
      margin:20px 20px;
      &::after{
        content: '';
        width: 420px;
      }
      img {
        width: 180px;
        height: 200px;
        padding: 0;
        margin-bottom: -3.5px;
      }
      .search-teacher-center-content-right {
        font-family: Helvetica;
        margin-top: 15px;
        li {
          font-size: 15px;
          margin: 10px 0 5px 6px;
        }
        button {
          float: right;
          margin-right: 5px;
          margin-top: 5px;
          background-color: rgb(200, 201, 204);
          width: 80px;
          height: 30px;
          border: #dcdfe6;
          border-radius: 5px;
        }
      }
    }
  }
  .search-teacher-footer{
    margin:26px 0 ;
    text-align: center;
  }
}
</style>
